import React, {Component, createRef} from 'react';

class BaiduMap extends Component {

  constructor(props) {
    super(props);
    this.containerRef = createRef()
  }

  render() {
    return (
      <div ref={this.containerRef} style={{width:'600px',height:'400px',margin:'20px'}}>

      </div>
    );
  }
  componentDidMount() {
    console.log(this.containerRef.current);

    // 百度地图API功能
    let map = new window.BMap.Map(this.containerRef.current);
    map.centerAndZoom(new window.BMap.Point(118.454, 32.955), 6);
    map.enableScrollWheelZoom();
    let beijingPosition=new window.BMap.Point(116.432045,39.910683),
      hangzhouPosition=new window.BMap.Point(130.35,46.83),
      taiwanPosition=new window.BMap.Point(121.491121,25.127053);
    let points = [beijingPosition,hangzhouPosition, taiwanPosition];

    let curve = new window.BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
    map.addOverlay(curve); //添加到地图中
    curve.enableEditing(); //开启编辑功能
  }
}

export default BaiduMap;
